import { PacmanLoader } from 'react-spinners'
import { useIsFetching } from 'react-query'
import { css } from '@emotion/react'

const loaderCss = css`
  position: absolute;
  left: 100%;
  top: 0;
  transform: translateX(-400%);
  z-index: 1;
`
function GlobalLoading () {
  const isFetching = useIsFetching()
  return (
    <PacmanLoader
      loading={isFetching}
      color={'rgba(175, 47, 47, 0.25)'}
      size={15}
      css={loaderCss}
    />
  )
}

export default GlobalLoading
